HTML Doc made using TxtToHTML written by "ssnake"

One of the most popular uses of JavaScript is to provide greater visual feedback to users as they navigate web pages. The normal behaviour of a browser when you move the mouse over a link is to display the URL of that link in the status bar. While this may show the user where the link goes, it says little about what they'll find when they go there. A link like this one is much more informative

<A HREF="links.html" onMouseOver="window.status='See the best collection of cool links anywhere';return true" onMouseOut="window.status='';return true">links page</A>

This introduces two new HTML attributes, onMouseOver and onMouseOut. These are known as event handlers, see the table for a full list. An event handler specifies an action to execute when a particular event occurs for that HTML object. In this case the actions are self-explanatory, they are called as the mouse moves over and away from the link. Each handler is executing two statements, separated by a semi-colon, the equivalent of a two line script. The first changes the contents of the status property of the window. This is the text displayed in the browser's status bar.
Instead of the bar displaying the complete URL of the links page, it now shows a description of the page. The onMouseOut event clears the status bar, otherwise the text would stay there until the mouse was moved over another link. The final statement in any event handler should return a success code. In this case it's a simple "return true" statement, but later we'll see how a script can cause the browser to react differently depending on the result returned.

The entire event specification is enclosed in double quotes, which means we have to use single quotes for any quoted strings within it. Since the single quote character is also used for apostrophes, be careful of traps like

onMouseOver="window.status='The World's best link page';return true"

This will do strange things to a browser as it tries to interpret "s best link page" as part of the command. The solution is to "escape" the quote character with a backslash

onMouseOver="window.status='The World\'s best link page';return true"

Rollover images

Another way of enhancing the feedback given to a user is through rollover images. These use the onMouseOver event to replace a link's image with a different one, and reload the original with onMouseOut. Here is a basic example

<A HREF="stuff.html"
onMouseOver="document.button.src='button1.gif';return true"
onMouseOut="document.button.src='button0.gif';return true"
><IMG SRC="button0.gif" NAME="button" WIDTH=...></A>

Since HTML regards spaces, line feeds and tabs as the same, we can split the tag over several lines to make it more readable. The browser treats it the same as if it were all on one line. Although we are working with an image here, the event handlers still belong to the link in the <A> tag. The IMG tag gives the object its unselected image. It also gives the object a name. The name is used by the onMouseOver event. This follows the hierarchical naming of JavaScript objects, the object is a part of the document, so it is referred to as document.button. The image's source is contained in the object's src property, referred to by document.button.src. If you change the contents of an image object's src property, the new image will be loaded and displayed. The onMouseOut event restores the previous imagery as the user moves away from the button.

You don't have to give each image a name. The array document.image can be used to refer to each image on the page, in the order they appear. This may be useful when dynamically creating pages (covered in Part 4). For most purposes, naming your images and other HTML elements makes your code much clearer and easier to work with.

You may have noticed the phrase "loaded and displayed". The first time the user moves the mouse over the button, the new image has to be downloaded. This won't seem a problem when you are testing the page on your hard drive, but once it's being accessed via a modem, the delay in loading will be significant. It's only a delay the first time, after then the image is in the browser's cache and will be loaded almost instantly. What we need is a way to preload the images into the browser's cache as soon as the page loads.

The onLoad event is perfect for this. Used as an attribute of the <BODY> tag, this event is executed as soon as the page has finished loading. We don't want to preload the images before then, if the page has six buttons, that's twelve images to load, which will slow down loading of the page itself. It's best to wait until the page is loaded.

This function can be included in the <HEAD> section of the page, and called as follows

<script type="text/javascript" language="javascript1.1">

</script>
</head>
<body bgcolor="white" onLoad="PreloadImages();return true">

This introduces a few new ideas, so we'll work through it. The first few lines declare the script and define the function PreloadImages. The first line of the function sets up an array containing the names of the images. This is more elegant that individually loading each image, and make adapting the script to handle more images a simple matter of adding their names to the array. The next three lines give the path to the images and the names of the standard and highlighted images. In this case, the convention is to call the standard image for the home button "home0.gif", the selected image "home1.gif" and so on. I won't state the obvious by telling you that both images should be the same size.

Next we define an image object, this won't actually be displayed, but setting its src property to the name of a file causes that file to be loaded, and thus stored in the browser cache.

We loop through the array using the for statement. The brackets contain three items, separated by semi-colons, to specify how the loop should behave. The syntax is similar to that used in C. The first item initialises an index variable and is executed once, before entering the loop. The second is a test, as long as this is true the loop is executed. ImageNames.length is a property of our array, returning the number of items in the array. JavaScript arrays are numbered from item 0, so with our array of six items, this is true for values of i up to 5, the last element in our array. The third element of the for statement is executed after each loop, to increment the index variable, "i++" is equivalent to "i = i + 1". The statements to be executed by the loop are contained in braces ({}).

The two lines between the braces do the actual work. When applied to strings, the + operator concatenates them. The first time around the loop, i is 0, ImageNames[0] is 'home' and the first line becomes

TempImage.src = 'images/home0.gif';

By assigning the image file to the src property of this image object, we force the browser to load it, even though it doesn't display it. This means the image is now in the browser's cache, immediately available the next time it's called for.

That's it. To use this script in your page, you only need to change the
first three lines of the function. There is one important point to
consider. You are making your visitors download all of the button images
for your page at once. Don't use so many that you overload their
connection, and share the same images between the various pages on your
site. If you overuse this, you'll discourage people from coming back.
Careful use of onMouseOver can make your pages more attractive
and more informative. An attractive and informative site is the type of
site that visitors return to.

Finally, we can combine rollover images and status messages like this

<A HREF="stuff.html"
onMouseOver="window.status='Return to home page';document.button.src='button1.gif';return true"
onMouseOut="window.status='';document.button.src='button0.gif';return true"
><IMG SRC="button0.gif" NAME="button" WIDTH=...></A>

**Boxout

Event handlers

JavaScript has several event handlers for various types of HTML object. Here is
a list of them and the objects they work with.

Handler Objects Executed when

onLoad <BODY>, <IMG> The file, HTML or image, completes loading

onUnload <BODY> The file is unloaded, i.e. replaced by another

onMouseOver <A>, <AREA> The mouse moves over the object

onMouseOut <A>, <AREA> The mouse is moved away from the object

onClick <A>, <AREA>, <INPUT> The user clicks the mouse on the object
(buttons, checkboxes and radio buttons)

onSubmit <FORM> The user clicks the Submit button of a form

onReset <FORM> The user clicks the Reset button of a form

onFocus <BODY>, <INPUT> The browser window containing this object becomes active

onBlur <BODY>, <INPUT> Focus is switched to a different window

onAbort <IMG> The user aborted the download of the image

onError <IMG> An error occurred when downloading the image (you may only use one of onError and onAbort)

onChange <INPUT> (Text, FileUpload and Select), The content of a text input field is changed, or a change is made to the selection of an item in a SELECT object.
<TEXTAREA>

**Pictures

Rollover.png: The second button in the navigation menu has changed colour, as the mouse is over it. A description of the contents of the link are displayed in the status bar at the bottom of the window.

WOA.png: This site also uses rollover images. Instead of changing the colour or design, the second image is offset by several pixels. the button appears to move as the mouse passes over it.